<<style lang="less">
  @import './examinations.less';
</style>
<template>
  <div>
    <Form :model="seachForm" inline :label-width="80" v-show="!isEditing">
      <FormItem prop="name" :label="$t('examName')">
        <Input v-model="seachForm.name" placeholder="请输入查询文字"></Input>
      </FormItem>
      <FormItem prop="intro" :label="$t('examIntro')">
        <Input v-model="seachForm.intro" placeholder="请输入查询文字"></Input>
      </FormItem>
       <FormItem prop="paperId" :label="$t('paperId')">
             <template> 
               <i-select v-model="seachForm.paperId"  style="width:200px" not-found-text="无课程"> 
               <i-option v-for="item in paperDatas" :value="item.id" v-bind:key="item.id">
                 {{ item.id +"："+item.name}}
                 </i-option> </i-select> 
                 </template>
      </FormItem>
      </br>
      <FormItem>
        <Button icon="ios-search" @click="seacherSubmit('seacherForm')">查询</Button>
      </FormItem>
    </Form>
    <ButtonGroup v-show="!isEditing">
      <Button icon="ios-add" @click="btnAddClick">新增</Button>
      <Button icon="ios-create" @click="btnEditClick" :disabled="!currentRow">修改</Button>
      <Button icon="ios-trash" @click="btnDelClick" :disabled="!currentRow">删除</Button>
    </ButtonGroup>
    <Table v-show="!isEditing" border highlight-row ref="currentRowTable" @on-current-change="tableCurrentChange" :columns="columns" :data="datas"></Table>
    <Page :total="pageInfo.totalRows" @on-change="pageNumberChange" v-show="!isEditing" />
     <!-- -->
    <Form v-if="isEditing" :model="dataForm" :label-width="80">
      <FormItem prop="name" :label="$t('name')">
        <Input v-model="dataForm.name" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem prop="paperId" :label="$t('paperId')">
        <Input v-model="dataForm.paperId" placeholder="请输入查询文字"></Input>
             <template> 
               <i-select v-model="dataForm.paperId"  style="width:200px" not-found-text="无课程"> 
               <i-option v-for="item in paperDatas" clearable :value="item.id" v-bind:key="item.id">
                 {{ item.id +"："+item.name}}
                 </i-option> </i-select> 
                 </template>
      </FormItem>
       <!-- -->
      <FormItem prop="intro" :label="$t('intro')">
      <DatePicker 
      clearable="false" editable="false" type="datetime" 
      format="yyyy-MM-dd hh:mm:ss"
      placeholder="Select date and time" 
      style="width: 200px" 
      @on-change="startTimeChange"
      ></DatePicker>
      <Input v-model="dataForm.startTime" placeholder="请输入查询文字"></Input>
      </FormItem>
       <FormItem prop="intro" :label="$t('intro')">
        <Input v-model="dataForm.intro" placeholder="Enter something..."></Input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="btnSaveClick">保存</Button>
        <Button style="margin-left: 8px" @click="btnCancelClick">取消</Button>
      </FormItem>
    </Form>
  </div>
</template>
<script>
import { getExaminationList, getExamination, addExamination, updateExamination, deleteExamination } from '@/api/examinations'
import {getPaperList}from '@/api/papers'
export default {
  name: 'examinations',
  data() {
    return {
      message: 'Hello Vue!',
      currentRow: null,
      isEditing: false,
      seachForm: {
        id:'',
        name: '',
       teacherId: '',
       organizationId: '',
       paperId:'',
       subjectId: '',
        intro: '',
        price: '',
        startTime: '',
        lastTime: '',
        overTime: '',
      },
      seachPaperForm: {
        id:'',
        name: '',
        intro: '',
      },
      pageInfo: {
        pageNumber: 1,
        pageSize: 10,
        totalRows: 0
      },
      dataForm: {},
      columns: [{
        type: 'index',
        width: 60,
        align: 'center'
      },
      {
        title: this.$t('examId'),
        key: 'id'
      }, 
      {
        title: this.$t('examName'),
        key: 'name'
      },  
      {
       title: this.$t('subjectId2'),
        key: 'subjectId'
      }, 
      {
        title: this.$t('paperId'),
        key: 'paperId'
      }, 
      
      {
       title: this.$t('intro'),
        key: 'intro'
      },
       {
        title: this.$t('startTime'),
        key: 'startTime'
      },
       {
        title: this.$t('overTime'),
        key: 'overTime'
      },
       {
        title: this.$t('lastTime'),
        key: 'lastTime'
      },],
      datas: [],//
      paperDatas:[],//课程列表
    }
  },
  created() {
    console.log('created message is: ' + this.message);
    this.queryList();
    this.queryPaperstList();
  },
  mounted() {
    console.log('mounted message is: ' + this.message);
  },
  methods: {
    seacherSubmit: function() 
    {
      console.log(this.seacherForm);
      this.pageInfo.pageNumber = 1;
      this.queryList();
      
    },
    queryList: function() 
    {
      var queryParams = {
        name: this.seachForm.name,
        intro: this.seachForm.intro,
        pageNumber: this.pageInfo.pageNumber,
        pageSize: this.pageInfo.pageSize
      };
      getExaminationList(queryParams).then(res => {
        this.datas = res.data.rows;
        this.pageInfo.totalRows = parseInt(res.data.total);
      });
    },
     queryPaperstList: function() //获取试卷列表
    {
      var queryPaperstParams = {
       // id:this.seachForm.subjectId, 
      };
      getPaperList(queryPaperstParams).then
      (paperRes =>
       {
        this.paperDatas= paperRes.data.rows;
       // this.pageInfo.totalRows = parseInt(res.data.total);
      }
      );
    },
    pageNumberChange: function(pagenum) 
    {
      this.pageInfo.pageNumber = pagenum;
      this.queryList();
    },
     TimeChange:function()
     {

     },
    startTimeChange:function(time)//时间
    {
        this.dataForm.startTime=time;
    },
    tableCurrentChange: function(currentRow, oldCurrentRow) 
    {
      this.currentRow = currentRow;
    },
    btnAddClick: function() 
    {
      this.dataForm = {};
      this.isEditing = true;
    },
    btnEditClick: function() 
    {
      this.dataForm = this.currentRow;
      this.isEditing = true;
      this.dataForm.startTime=(this.dataForm.startTime).toISOString();
    },
    btnDelClick: function() 
    {
      this.$Modal.confirm({
        title: '删除',
        content: '确定要删除选中的信息吗?',
        onOk: () => {
          this.delData();
        }
      });
    },
    btnSaveClick: function() 
    {
      if (this.dataForm.id) {
        updateExamination(this.dataForm.id, this.dataForm).then(res => {
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryList();
            this.isEditing = false;
          } else {
            this.$Message.error(res.error);
          }
        });
      } else {
        addExamination(this.dataForm).then(res => {
          if (res.data && res.data.affectedRows > 0) {
            this.$Message.success('保存成功!');
            this.queryList();
            this.isEditing = false;
          } else {
            this.$Message.error(res.error);
          }
        });
      }
    },
    btnCancelClick: function() 
    {
      this.isEditing = false;
    },
    delData: function() 
    {
      deleteExamination(this.currentRow.id).then(res => {
        if (res && res.affectedRows > 0) {
          this.$Message.success('删除成功!');
          this.queryList();
        } else {
          this.$Message.error('删除失败!');
        }
      });
    }
  }
}

</script>